<template>
	<div>
		<div class="personalinfo">
			<div class="dropdown">
				<el-dropdown>
					<span class="el-dropdown-link" style="color: skyblue; font-size: 18px">
						个人中心
					</span>
					<el-dropdown-menu slot="dropdown">
						<a @click="historyinfo()">
							<el-dropdown-item>历史记录</el-dropdown-item>
						</a>
						<a href="/">
							<el-dropdown-item>退出</el-dropdown-item>
						</a>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<div class="persion">
				<img src="../assets/person.png" /> 
			</div>
		</div>

		<el-row>
			<el-col :span="12">
				<p class="jx">我的课程</p>
			</el-col>
		</el-row>
		<div></div>

		<div>
			<el-row>
				<el-col :span="6" v-for="(item, index) in userInfo" :key="index">
					<div style="width: 100%">
						<div style="width: 100%">
							<img style="width: 75%" :src="imgurl[index].src" />
						</div>
						<div>
						<!-- 	<h2>{{ item.menuName }}</h2> -->
			        <el-row style="margin-left: 12%;">
			         	<el-col :span="7">
			         			<a @click="linkToOrderPractice(item.menuId)">
											<img style="width: 40px;height: 40px;" src="../assets/顺序练习.png" />
			         		<p>
			         		顺序练习
			         		</p></a>
			         	</el-col>
			         	<el-col :span="7">
			         		<a @click="mockpractice(item.menuId, userId, item.menuName)">
										<img style="width: 40px;height: 40px;" src="../assets/模拟测试.png" />
			         		<p>
			         			模拟测试
			         		</p></a>
			         	</el-col>
			         	<el-col :span="7">
			         		 <a @click="linkBackTopic(item.menuId)">
										 <img style="width: 40px;height: 40px;" src="../assets/随机练习.png" />
			         		<p>
			         		 背题模式
			         		</p></a>
			         	</el-col>
								<el-col :span="7"> 
									<img style="width: 40px;height: 40px;" src="../assets/章节练习.png" /> 
									<br/>
							<el-dropdown> 
							  <span
							    class="el-dropdown-link">
							    章节练习
							  </span>
							  <el-dropdown-menu slot="dropdown">
							    <a @click="linkToChapterPractice(item.menuId, '1')">
							      <el-dropdown-item>公共知识</el-dropdown-item>
							    </a>
							    <a @click="linkToChapterPractice(item.menuId, '2')">
							      <el-dropdown-item>专业知识</el-dropdown-item>
							    </a>
							  </el-dropdown-menu>
							</el-dropdown>
								</el-col>
								<el-col :span="7">
									<a @click="linkToErrorRecord(item.menuId)">
										<img style="width: 40px;height: 40px;" src="../assets/学习记录.png" />
									<p>
									  错题记录
									</p></a>
								</el-col>
								<el-col :span="7">
									 <a @click="linkToErrorPractice(item.menuId)">
										 <img style="width: 40px;height: 40px;" src="../assets/错题练习.png" />
									<p>
									  错题练习
									</p></a>
								</el-col>
			         </el-row> 
								<!-- <a @click="linkToOrderPractice(item.menuId)">顺序练习</a>
                /
                <a @click="mockpractice(item.menuId, userId, item.menuName)">
                  模拟测试
                </a>
                /
                <a @click="linkBackTopic(item.menuId)">背题模式</a>
                /
                <el-dropdown> 
                  <span
                    class="el-dropdown-link"
                    style="color: skyblue; font-size: 10px"
                  >
                    章节练习
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <a @click="linkToChapterPractice(item.menuId, '1')">
                      <el-dropdown-item>公共知识</el-dropdown-item>
                    </a>
                    <a @click="linkToChapterPractice(item.menuId, '2')">
                      <el-dropdown-item>专业知识</el-dropdown-item>
                    </a>
                  </el-dropdown-menu>
                </el-dropdown>
                /
               <a @click="linkToErrorRecord(item.menuId)">错题记录</a>
                /
                <a @click="linkToErrorPractice(item.menuId)">错题练习</a>
              </p> -->
						</div>
					</div>
				</el-col>
			</el-row> 
		</div>
		<div>
			<el-drawer size="65%" title="历史记录" :visible.sync="drawer" :with-header="false">
				<div class="table">
					<el-table :data="tableData" border
						style="width: 100%; height: 100%;max-height: 700px;  overflow-y: scroll;text-align: center;">
						<el-table-column prop="userName" label="姓名" width="100px" align="center">
						</el-table-column>
						<el-table-column prop="menuName" label="题库名称" width="100px" align="center">
						</el-table-column>
						<el-table-column prop="undoNum" label="未做题" width="100px" align="center">
						</el-table-column>
						<el-table-column prop="errorNum" label="错题数" width="100px" align="center">
						</el-table-column>
						<el-table-column prop="score" label="得分" width="100px" align="center">
						</el-table-column>
						<el-table-column prop="pass" label="是否合格" width="200px" align="center">
						</el-table-column>
						<el-table-column prop="createTime" label="测试时间" width="200px" align="center">
						</el-table-column>
					</el-table>
				</div>
			</el-drawer>
		</div>
	</div>
</template>

<script>
	import {
		order,
		findMockRecord
	} from "../api/index.js";
	export default {
		name: "courseinfo",
		data() {//'../assets/11.jpg'
			return {
				imgurl:[ {id:0,src:require('../assets/材料员.png')},
				{id:1,src:require('../assets/A证.png')},
				{id:2,src:require('../assets/劳务员.png')},
				{id:3,src:require('../assets/B证.png')},],
				drawer: false,
				tableData: [],
				userInfo: [],
				userId: "",
				records: [],
			};
		},
		mounted() {
			if (localStorage.getItem("userInfo") && localStorage.getItem("userId")) {
				this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
				this.userId = JSON.parse(localStorage.getItem("userId"));
			} else {
				// this.$router.push("/");
			}
			console.log(this.userInfo, this.userId)
		},
		methods: {
			mockpractice(nmenuId, nmenuName) {
				window.localStorage.setItem("menuId", nmenuId);
				window.localStorage.setItem("menuName", nmenuName);
				if (nmenuId != "" && nmenuName != "") {
					this.$router.push("examniee");
				} else {
					// this.$router.push("/");
				}
			},
			historyinfo() {
				this.drawer = true;
				findMockRecord({
						userId: this.userId,
					})
					.then((res) => {
						if (res.data.code === 0) {
							this.tableData = res.data.data;
						} else {
							this.$message({
								type: "error",
								message: res.data.msg,
							});
						}
					})
					.catch((error) => {
						this.$message({
							type: "error",
							message: error,
						});
					});
			},
			linkToOrderPractice(menuId) {
				this.toPractice(menuId, "brush", "");
			},
			linkToChapterPractice(menuId, chapter) {
				this.toPractice(menuId, "chapter", chapter);
			},
			linkToErrorRecord(menuId) {
				window.localStorage.setItem("menuId", menuId);
				this.$router.push({
					name: "errolog",
				});
			},
			linkToErrorPractice(menuId) {
				this.toPractice(menuId, "error", "");
			},
			linkBackTopic(menuId) {
				window.localStorage.setItem("menuId", menuId);
				this.$router.push({
					name: "backTopic",
					query: {
						apiType: "brush",
					},
				});
			},
			toPractice(nmenuId, apiType, chapter) {
				window.localStorage.setItem("menuId", nmenuId);
				this.$router.push({
					name: "practice",
					query: {
						apiType: apiType,
						chapterType: chapter,
					},
				});
			},
		},
	};
</script>

<style scoped>
	.personalinfo {
		position: relative;
		margin: 0;
		padding: 0;
		height: 50px;
		width: 100%;
	}

	a {
		text-decoration: none;
		color: skyblue;
		font-size: 10px;
	}

	.persion {
		float: right;
		margin-top: 4px;
		height: 74px;
		width: 73px;
		/* border-radius: 50%;
		background-color: cadetblue; */
	}

	.persion img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.dropbtn {
		color: black;
		font-size: 16px;
		border: none;
		cursor: pointer;
	}

	.jx {
		float: left;
		margin-left: 5%;
		font-size: 30px;
		letter-spacing: 3px;
		color: #9cb2bd;
	}

	.dropdown {
		position: relative;
		float: right;
		margin-right: 8%;
		display: inline-block;
		margin-top: 1%;
	}

	.dropdown-content {
		position: absolute;
		display: none;
		min-width: 90px;
		top: 30px;
		font-size: 13px;
		margin-left: -10px;
		background-color: red;
	}

	.dropdown-content p {
		color: black;
		padding: 2px 2px;
		text-decoration: none;
		display: block;
	}

	.dropdown-content .lsjl:hover {
		color: paleturquoise;
	}

	.dropdown-content .tc:hover {
		color: paleturquoise;
	}

	.dropdown:hover .dropdown-content {
		display: block;
	}

	.dropdown:hover .dropbtn {
		color: lightskyblue;
	}

	.el-dropdown-link {
		position: relative;
		cursor: pointer;
	/* 	color: #409eff; */
		top:9.9px;
		color: skyblue; 
		font-size: 10px;		
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}
</style>
